<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>实时数据</span>
        <el-button
          :type="flowStore.loaderType == 'real' ? 'success' : 'primary'"
          size="small"
          @click="handleLoad"
        >
          <span>{{ flowStore.loaderType == "real" ? "已加载" : "加载" }}</span>
        </el-button>
      </div>
    </template>
    <el-skeleton style="width: 100%" loading animated>
      <template #template>
        <!-- <el-skeleton-item variant="text" style="width: 80%" /> -->
        <!-- <el-skeleton-item variant="text" style="width: 70%" /> -->
        <el-skeleton-item variant="text" style="width: 100%" />
        <!-- <el-skeleton-item variant="text" style="width: 70%" /> -->
        <!-- <el-skeleton-item variant="text" style="width: 40%" /> -->
      </template>
    </el-skeleton>
    <!-- <div style="text-align: center">
      <el-icon class="is-loading" size="96px" color="rgba(128,128,128,0.5)">
        <Basketball />
      </el-icon>
    </div> -->
  </el-card>
</template>

<script setup>
import useFlowStore from "@/store/flow.js";
const flowStore = useFlowStore();

const handleLoad = () => {
  flowStore.loaderType = "real";
  flowStore.autoRefresh = true;
  flowStore.ignoreWarning = false;
  flowStore.fakeDate = false;
  flowStore.customDate = "";
  flowStore.loadSource();
};
</script>

<style scoped>
@import "./styles/card.css";
</style>
